<style>
    .layui-form-label.required:before { /* 这种写法也可以*/
        content: ' *';
        color: red;
    }
    .open-form .layui-form-label {
        width: 110px;
    }
    .open-form .layui-input-block{
        margin-left: 140px;
    }
</style>
<script type="text/javascript" src="../../../admin/assets/js/pdfobject.min.js"></script>
<!-- 表单弹窗 -->
<form lay-filter="proDrawForm" class="layui-form open-form">
    <div class="open-model">
        <div class="open-auto">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>图纸信息</legend>
            </fieldset>
            <div class="layui-form-item layui-row">
                <div class="layui-col-md3">
                    <label class="layui-form-label required">产品图纸编号：</label>
                    <div class="layui-input-block">
                        <input name="code" disabled type="text" class="layui-input"
                               required autocomplete="off"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label required">图纸版本名称：</label>
                    <div class="layui-input-block">
                        <input type="text" id="versionName" disabled name="versionName" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label required">所属产品图纸：</label>
                    <div class="layui-input-block">
                        <input type="text" id="drawNo" disabled name="drawNo" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label required">产品图纸文件：</label>
                    <div class="layui-input-block">
                        <div id="addHeaderPdf" class="companyFormPhotos"></div>
                        <input name="attachmentPdf" id="attachmentPdf" type="hidden" class="layui-input"
                               lay-verify="attachmentPdf"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-col-md3">
                    <label class="layui-form-label required">产品SKU料号：</label>
                    <div class="layui-input-block">
                        <input type="text" id="skuCode" disabled name="skuCode" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label required">产品性质：</label>
                    <div class="layui-input-block">
                        <input type="text" id="assemblyNatureName" disabled name="assemblyNatureName" class="layui-input"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label required">图纸类别：</label>
                    <div class="layui-input-block">
                        <input type="text" id="drawTypeName" disabled name="drawTypeName" lay-filter="drawTypeName"
                               class="layui-input"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label required">状态：</label>
                    <div class="layui-input-block">
                        <input type="text" id="isDeleted" disabled data-id="isDeleted" name="isDeleted" class="layui-input"/>
                    </div>
                </div>
            </div>
            <div class="layui-form-item layui-row">
                <div class="layui-col-md3">
                    <label class="layui-form-label required">创建人：</label>
                    <div class="layui-input-block">
                        <input type="text" id="creatorName" disabled name="creatorName" class="layui-input"
                               lay-filter="creatorName"/>

                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label required">创建时间：</label>
                    <div class="layui-input-block">
                        <input type="text" id="createTime" disabled name="createTime" class="layui-input"
                               lay-filter="createTime"/>
                    </div>
                </div>
                <div class="layui-col-md3">
                    <label class="layui-form-label required">是否默认版本：</label>
                    <div class="layui-input-block">
                        <input type="text" id="isDefault" disabled name="isDefault" class="layui-input"
                               lay-filter="isDefault"/>

                    </div>
                </div>
            </div>
            <fieldset class="layui-elem-field layui-field-title">
                <legend>其他信息</legend>
            </fieldset>
            <div class="layui-form-item layui-row">
                <div class="layui-col-md6">
                    <label class="layui-form-label required">产品图纸预览：</label>
                    <div class="layui-input-block" id="TuZhiPdf" style="height: 100%;margin-left:10px">

                    </div>
                </div>
                <div class="layui-col-md6">
                    <label class="layui-form-label required">图纸备注：</label>
                    <div class="layui-input-block">
                        <textarea id="remark" name="remark" disabled placeholder="加工工艺说明" class="layui-textarea"
                                  autocomplete="off"/>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item text-right">
            <button class="layui-btn layui-btn-primary" type="button" ew-event="closeDialog">关闭</button>
        </div>
    </div>
</form>

<script type="text/html" id="viewAttachmentHtml">
    <div id="example1" style="height: 100%;"></div>
</script>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'admin', 'laytpl', 'config'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var admin = layui.admin;
        var form = layui.form;

        let drawData = admin.getTempData("drawData");

        form.val('proDrawForm', drawData === undefined ? null : drawData);

        if (drawData.isDefault){
            if (drawData.isDefault === '1'){
                $("#isDefault").val("是");
            }else {
                $("#isDefault").val("否");
            }
        }

        if (drawData.isDeleted){
            $("#isDeleted").val("作废");
        }else{
            $("#isDeleted").val("正常");
        }

        $('#addHeaderPdf').html('<div class="attachments">' +
            '<div><img name="attachments" src="../../../admin/assets/images/attachmentsIcon/pdf.png"><span class="file-a">' + drawData.name + '</span></div></div>');
        $('#attachmentPdf').val(drawData.fileUrl);
        $(".attachments").click(function () {
            let json = {};
            json.attachment = drawData.fileUrl;
            showViewAttachmentModel(json);
        })

        if (drawData.fileUrl) {
            if (drawData.fileUrl && drawData.fileUrl.indexOf(".pdf") !== -1) {
                PDFObject.embed(drawData.fileUrl, "#TuZhiPdf");
            } else {
                let attachmentHtml = "";
                drawData.fileUrl.split(",").forEach((attachmentUrl, index) => {
                    attachmentHtml += '<div><div><img style="max-width: 763px" src="' + attachmentUrl + '"></div></div>';
                });
                $('#TuZhiPdf').html(attachmentHtml);
            }
        }

        // 查看附件
        function showViewAttachmentModel(data) {
            admin.open({
                type: 1,
                area: ['60%', '80%'],
                offset: '65px',
                title: '查看附件',
                content: $('#viewAttachmentHtml').html(),
                success: function () {
                    if (data.attachment && data.attachment.indexOf(".pdf") !== -1) {
                        PDFObject.embed(data.attachment, "#example1");
                    } else {
                        var attachmentHtml = "";
                        data.attachment.split(",").forEach((attachmentUrl, index) => {
                            attachmentHtml += '<div><div><img src="' + attachmentUrl + '"></div></div>';
                        });
                        $('#example1').html(attachmentHtml);
                    }
                }
            })
        }
    });
</script>